<template>
  <div>
    <div class="firstLoading" v-if="!bookDetail">
      <van-loading size="30px" text-size="30px" text-color="#adadad" />Loding....
    </div>

    <div class="comment" v-if="bookDetail">
      <div class="top_nav">
        <div class="nav">
          <span class="iconfont icon-youjiantou1" @click="back"></span>
          <span class="iconfont icon-Magnifier"></span>
        </div>
      </div>
      <!-- 书籍介绍 -->
      <div class="warp">
        <div class="left">
          <div class="img">
            <img :src="bookDetail.coverImage" alt="" />
          </div>
        </div>
        <div class="right">
          <p class="book">
            <i class="name">{{ bookDetail.title }}</i>
          </p>
          <p class="type">
            <i>{{ bookDetail.bookType }}</i><span>{{ bookDetail.author }}</span>
          </p>
          <p>
            <van-rate v-model="value" :size="12" color="#ffd21e" void-icon="star" void-color="#eee" />
          </p>
          <p class="font_num">
            <span>{{ bookInfo.entry["pris:book"].words | computedCount }}字</span>
            <i class="click_num">{{ bookInfo.entry["pris:subscribe"].clicksCount }}点击</i>
          </p>
          <p class="price">5阅点/千字</p>
        </div>
      </div>
      <!-- 书籍简介 -->
      <div class="book_intro">
        <p class="intro">{{ bookInfo.entry.summary }}</p>
        <span class="iconfont icon-xiajiantou"></span>
      </div>

      <!-- 书籍章节更新章节通知 -->
      <div class="notice" @click="showCatalogue = true" v-if="lastSection">
        <span class="iconfont icon-liebiao"></span>
        <p class="date">
          {{ lastSection.update | computedTime }}
          <span>更新至:{{ lastSection.latestArticleTitle }}</span>
        </p>
        <div class="state">
          <span class="now">连载中</span>
          <span class="iconfont icon-youjiantou"></span>
        </div>
      </div>

      <!-- 评论区 -->
      <div class="comment_block">
        <!-- 头部条 -->
        <div class="top">
          <span>评论</span>
          <div class="write" @click="writerCommnet = true">
            <span class="iconfont icon-youjiantou1"></span> 写评论
          </div>
        </div>
        <!-- 评论楼层 -->
        <div class="floor">
          <ul>
            <li v-for="comment in comment.list" :key="comment.commentId">
              <div class="left">
                <div class="img">
                  <img :src="comment.avatar || null" alt="" />
                </div>
              </div>
              <div class="right">
                <!-- 网友名字 -->
                <p class="name">
                  {{ comment.nickName
                  }}<span class="level">Lv.{{ comment.userLevel }}</span>
                </p>

                <p class="rate">
                  <van-rate v-model="value" :size="10" color="#ffd21e" void-icon="star" void-color="#eee" />
                  <span class="time">{{ comment.time | computedTime }}</span>
                </p>
                <p class="content" @click="showReply = true">
                  {{ comment.comment }}
                </p>
                <div class="icon">
                  {{ comment.likes }}<span class="iconfont icon-dianzan"></span>
                </div>
              </div>
            </li>
            <!-- 有评论就出现 -->
            <div class="more" v-if="comment.totalcount > 20" @click="showAllCommnet = true">
              查看全部评论
            </div>
            <!-- 提示没有评论 -->
            <div class="no_comment" v-if="!comment.list.length">
              <p>快来当第一个写评论的人吧</p>
              <div class="btn">写评论</div>
            </div>
          </ul>
        </div>
      </div>
      <!-- 评论某楼层组件 -->
      <reply-floor v-if="showReply" @change-show-reply="changeShowReply"></reply-floor>
      <!-- 写评论 -->
      <write-comment v-if="writerCommnet" @change-writer-commnet="changeWriterCommnet"></write-comment>
      <!-- 全部评论组件 -->
      <all-comment v-if="showAllCommnet" @change-show-all-comment="changeshowAllCommnet"></all-comment>
      <!-- 收藏已购阅读 -->
      <div class="bottom_bar">
        <div>收藏</div>
        <div>购买</div>
        <div class="red">免费试读</div>
      </div>
      <!-- 全部目录组件 -->
      <keep-alive>
        <catalogue-com v-if="showCatalogue" :bookDetail="bookDetail" :bookCover="bookCover" :allBookList="allBookList"
          :bookInfo="bookInfo" @change-show-catalogue="changeShowCatalogue" @update-bookInfo="updateBookInfo">
        </catalogue-com>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  // 获取到书籍目录列表
  import { getMBookLists, getBookDetail, getLastSection } from '../../api/bookdetail'
  import { getComment } from '../../api/comment'
  // 目录组件
  import CatalogueCom from '../../components/common/CatalogueCom.vue'
  // 全部评论
  import AllComment from './AllComment.vue'
  // 回复楼层组件
  import ReplyFloor from './ReplyFloor.vue'
  // 写评论组件
  import WriteComment from './WriteComment.vue'

  export default {
    components: { ReplyFloor, AllComment, WriteComment, CatalogueCom },
    data() {
      return {
        value: 0,
        // 全部组件show
        showAllCommnet: false,
        // 展示隐藏回复组件
        showReply: false,
        // 写评论组件展示
        writerCommnet: false,
        // 展示全部目录组件
        showCatalogue: false,
        //传递子组件的书本信息
        bookDetail: null,
        // 传递子组件的数据列表
        allBookList: [],
        //传递子组件书籍图片
        bookCover: '',
        // 本组件的数据
        bookInfo: null,
        // 获取评论
        comment: [],
        // 获取最后一章信息信息
        lastSection: null
      }
    },
    created() {
      this.getAllBookInfoFun()
    },
    mounted() {},
    methods: {
      updateBookInfo(event) {
        console.log('第二次')
        this.$emit('update-bookInfo', event)
      },
      back() {
        this.$router.go(-1)
      },
      // 隐藏全部评论组件
      changeshowAllCommnet(event) {
        this.showAllCommnet = event
      },
      // 隐藏写评论组件
      changeWriterCommnet(event) {
        this.writerCommnet = event
      },
      // 隐藏评论列表
      changeShowReply(event) {
        this.showReply = event
      },
      // 目录列表不展示
      changeShowCatalogue(event) {
        this.showCatalogue = event
      },
      // 获取书全部信息
      getAllBookInfoFun() {
        let id = this.$route.query.id
        let title = this.$route.query.title

        getComment({ bookId: id })
          .then(({ data: res }) => {
            this.comment = res.all
          })
          .catch(err => {
            if (err) {
              this.$toast({
                message: '服务器崩溃',
                position: 'middle'
              })
            }
          })
        // 得到书的详细信息
        getBookDetail({ id: id, title: title })
          .then(({ data: res }) => {
            this.bookInfo = res.feed
            this.value = Number(this.bookInfo.entry['pris:ranking'].value)
          })
          .catch(err => {
            if (err) {
              this.$toast({
                message: '服务器崩溃',
                position: 'middle'
              })
            }
          })
        // 得到书的全部目录
        getMBookLists({ source_uuid: id })
          .then(({ data: res }) => {
            this.bookDetail = res.data.book
            this.allBookList = res.data.catalog
          })
          .catch(err => {
            if (err) {
              this.$toast({
                message: '服务器崩溃',
                position: 'middle'
              })
            }
          })
        // 得到最后一张数据
        getLastSection({ id: id })
          .then(({ data: res }) => {
            this.lastSection = res.item
          })
          .catch(err => {
            if (err) {
              this.$toast({
                message: '服务器崩溃',
                position: 'middle'
              })
            }
          })
      }
    }
  }
</script>
<style lang="less" scoped>
.firstLoading {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 500;
}
.comment {
  //导航栏
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  .top_nav {
    background-color: #fff;
    padding: 0 13px;
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      width: 100%;
      span {
        color: #706e6b;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  //书籍信息
  .warp {
    background: #fff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    padding: 0 13px;
    .left {
      .img {
        width: 100px;
        height: 143px;
        box-shadow: 3px 2px 8px -3px #706e6b;
        img {
          width: 100px;
          height: 143px;
        }
      }
    }
    .right {
      flex: 1;
      margin-left: 13px;
      line-height: 20px;
      p {
        color: #a2a2a2;
        font-size: 12px;
        .click_num {
          margin-left: 10px;
        }
      }
      .book {
        display: flex;
        i {
          font-style: normal;
          font-size: 16px;
          font-weight: 600;
          color: #383838;
        }
      }
      //   .description {
      //     font-size: 12px;
      //     color: #7a7a7a;
      //     text-overflow: -o-ellipsis-lastline;
      //     overflow: hidden; //溢出内容隐藏
      //     text-overflow: ellipsis; //文本溢出部分用省略号表示
      //     display: -webkit-box; //特别显示模式
      //     -webkit-line-clamp: 3; //行数
      //     line-clamp: 3;
      //     -webkit-box-orient: vertical; //盒子中内容竖直排列
      //     width: 100%;
      //   }
      .type {
        position: relative;
        color: #a2a2a2;
        font-size: 12px;
        span {
          margin-left: 10px;
          color: #b7d9f7;
        }
        &::after {
          position: absolute;
          top: 50%;
          left: 28px;
          transform: translateY(-50%);
          width: 1px;
          height: 10px;
          content: '';
          background-color: #a4a2a1;
        }
      }
    }
  }
  //   书籍简介
  .book_intro {
    padding: 13px;
    position: relative;
    background: #fff;
    p {
      width: 100%;
      height: 26px;
      font-size: 13px;
      color: #a2a2a2;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    span {
      position: absolute;
      bottom: 13px;
      right: 13px;
      font-size: 13px;
      color: #a2a2a2;
    }
  }
  //通知内容
  .notice {
    padding: 0 13px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #5f5d5b;
    background: #fff;
    .date {
      margin-left: 5px;
      flex: 1;
      span {
        margin: 0 5px;
      }
    }
    .state {
      display: flex;
      align-items: center;
      .now {
        color: #7ab870;
      }
    }
  }

  //comment区域

  .comment_block {
    background: #fff;
    margin-top: 5px;
    padding: 0 13px;
    .top {
      height: 50px;
      color: #595753;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .write {
        font-size: 12px;
        // width: 60px;
        padding: 0 5px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        // line-height: 20px;
        // text-align: center;
        border: 2px solid #999795;
        border-radius: 10px;
        .iconfont {
          font-size: 15px;
        }
      }
    }
    .floor {
      ul {
        padding-bottom: 50px;
        .no_comment {
          width: 100%;
          text-align: center;
          margin: 0 auto;
          color: #a2a2a2;
          font-size: 14px;
          margin-top: 20px;
        }
        //   有评论
        .more {
          width: 120px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          margin: 0 auto;
          border: 1px solid #a2a2a2;
          color: #a2a2a2;
          border-radius: 5px;
        }
        //   没有评论
        .btn {
          font-size: 14px;
          line-height: 30px;
          border: 1px solid #f24949;
          text-align: center;
          height: 30px;
          width: 80px;
          color: #f24949;
          border-radius: 20px;
          margin: 10px auto;
        }

        li {
          display: flex;
          padding: 13px 0;
          position: relative;
          //   margin-top: 24px;
          //左侧头像
          .left {
            width: 30px;
            height: 30px;
            img {
              height: 30px;
              width: 30px;
              border-radius: 50%;
            }
          }
          //右侧
          .right {
            flex: 1;
            margin-left: 15px;
            p:not(:nth-of-type(1)) {
              margin-top: 5px;
            }
            .name {
              font-size: 12px;
              color: #b7d9f7;
              span {
                transform: scale(0.8);
                display: inline-block;
                width: 20px;
                height: 12px;
                font-size: 12px;
                color: #f7caca;
                background: #fff;
                border: 1px solid #f7caca;
              }
            }
            .time {
              color: #a2a2a2;
              font-size: 12px;
              margin-left: 10px;
            }
            .content {
              width: 100%;
              font-size: 13px;
              word-break: break-all;
              white-space: wrap;
              color: #464542;
            }
            .icon {
              width: 40px;
              height: 40px;
              position: absolute;
              right: 0;
              top: 15px;
              color: #a2a2a2;
              font-size: 12px;
              .iconfont {
                margin-left: 5px;
              }
            }
          }
          //查看更多评论
        }
      }
    }
  }
  .bottom_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42px;
    background: #fff;
    display: flex;
    div {
      width: 33%;
      height: 42px;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      &.red {
        color: #fff;
        background: #f24949;
      }
    }
    &::after {
      position: absolute;
      top: 50%;
      margin-top: -10px;
      left: 33%;
      content: '';
      width: 2px;
      height: 20px;
      background: #ebebeb;
    }
  }
}
</style>